<template>
    <div>
        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            <el-form-item label="查询条件">
                <el-input clearable size="mini" v-model="queryParam.keyword" placeholder="请输入部门名称或部门sn"></el-input>
            </el-form-item>
            <el-form-item label="部门状态">
                <el-select clearable size="mini" v-model="queryParam.state" placeholder="请选择部门状态">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="toQuery">查询</el-button>
                <el-button type="success" size="mini" @click="addWin">新增</el-button>
                <el-button type="danger" size="mini" @click="bartchDel">删除</el-button>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="部门名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sn"
                    label="部门sn"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="部门状态">
                <template slot-scope="scop">
                    <el-tag v-if="scop.row.state == 0">正常</el-tag>
                    <el-tag v-else-if="scop.row.state == 1" type="success">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="managerId"
                    label="部门管理员">
            </el-table-column>
            <el-table-column
                    prop="parent.name"
                    label="上级部门">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <!-- slot-scope="scope" 这是一个固定写法。当一列中，需要自定义样式，则可以通过slot-scope进行传值。当前这一行的数据，可以传入到 自定义的样式中
                 scope.row ： 固定写法，作用：获取当前这一行的全部数据
                 -->
                <template slot-scope="scope">
                    <el-button @click="modify(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- elementui实现分页效果，必须接收一个结果：总记录数 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.currentPage"
                :page-sizes="[1, 2, 3, 4,5]"
                :page-size="queryParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="编辑部门信息" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="部门名称" label-width="80px" prop="name">
                    <el-input clearable v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门sn" label-width="80px" prop="address">
                    <el-input clearable v-model="form.sn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门状态" label-width="80px">
                    <el-radio-group v-model="form.state">
                        <el-radio :label="0">正常</el-radio>
                        <el-radio :label="1">禁用</el-radio>
                    </el-radio-group>

                </el-form-item>
                <el-form-item label="部门管理" label-width="80px">
                    <el-select filterable v-model="form.managerId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in employeeList"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上级部门" label-width="80px">
                    <el-cascader
                            clearable
                            :props="props"
                            v-model="form.parentIds"
                            :options="parentList"
                            @change="handleChange"></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false;toQuery()">取 消</el-button>
                <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    var axios = require("axios")
    var mockjs = require('mockjs')
    export default {

        data() {
            return {
                employeeList: [],
                props: {
                    checkStrictly: true,
                    value: "id",
                    label: "name"
                },
                value: [],
                parentList: [],
                multipleSelection: [],
                queryParam: {
                    dept: {},
                    currentPage: 1,
                    pageSize: 5
                }, //所有的查询条件，都在当前这个对象中
                form: {},
                tableData: [],
                total: 0,
                dialogFormVisible: false,
                rules: {
                    name: [{
                        required: true, message: "部门名称不能为空"
                    }]
                }
            }
        },
        mounted() { //可以在页面加载完后，自动调用
            this.toQuery();
        },
        methods: {
            //查询所有员工列表
            findAllEmployee() {
                axios.get("/employee/findall").then(res => {
                    this.employeeList = res.data;
                })
            },
            //查询部门的级联数据
            findAllDept(){
                //弹出窗口时，查询初始数据（上级部门）
                axios.get("/dept/findtreedepartment").then(res => {
                    this.parentList = res.data;
                })
            },

            handleChange(value) {
                console.log(value);
            },
            addWin() {
                this.form = {},//新增时，要清空弹框表单中的数据
                    this.dialogFormVisible = true;
                this.findAllEmployee();
                this.findAllDept();
            },
            bartchDel() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/dept/bartchdel", this.multipleSelection).then(res => {
                        if (res.data.success) {
                            //执行查询时，让他从第1页开始查
                            this.queryParam.currentPage = 1;
                            //如果删除成功，则调用查询，刷新数据
                            this.toQuery()
                        }
                        this.$notify({
                            title: '提示',
                            message: res.data.message,
                            type: 'warning'
                        });
                    })
                });


            },

            //这个方法是：每页条数发生变化时，触发的方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.queryParam.pageSize = val;
                this.toQuery();
            },
            //当前页码发生变化时，触发的方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.queryParam.currentPage = val;
                this.toQuery();
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //在这里，调用后台请求，将前端form对象数据，提交给后台
                        // console.log(">>>>>>>>>>>form="+JSON.stringify(this.form))
                        axios.post("/dept", this.form).then(res => {
                            if (res.data.success) {
                                //如果添加成功，则关闭窗口，同时调用查询
                                this.dialogFormVisible = false;
                                this.toQuery();
                            }
                            this.$notify({
                                title: '提示',
                                message: res.data.message,
                                type: 'warning'
                            });
                        })

                    } else {

                    }
                })
            },
            toQuery() {
                // axios.post("/dept/findbyparams",this.queryParam).then(res => {
                //   // this.tableData = res.data;
                // })
                console.log("selection=======>" + JSON.stringify(this.multipleSelection))
                axios.post("/dept/findpagebyparams", this.queryParam).then(res => {
                    // this.tableData = res.data;
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                })

            },
            modify(row) {//row获取的当前选择的一整行的数据
                this.dialogFormVisible = true;
                this.form = row;
                //调用更新界面中，查询所有员工及部门级联数据
                this.findAllDept();
                this.findAllEmployee();
            },
            del(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送一个后台删除的请求即可
                    alert(JSON.stringify(row))
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(val) {
                // for(item in val){
                //     //push方法是向数组中添加元素
                //     this.multipleSelection.push(item.id)
                // }

                //es6的新语法：循环val这个数据，循环中它的每一个item元素，将item元素中的id属性取出来
                //全部取出来后，再赋值给变量multipleSelection
                this.multipleSelection = val.map(item => item.id);
                // console.log("multipleSelection====>"+JSON.stringify(this.multipleSelection))
            }
        }
    }
</script>
